<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 控制子组件插槽,方式1- 通过父传子 -->
      <!-- <page-tool :show-before="false"> -->
      <!-- 控制子组件插槽,方式2- 子组件通过$slots自行判断 -->
      <page-tool>
        <!-- 点击事件 显示对话框 -->
        <el-button slot="after" type="primary" size="small" @click="onshowDialog()">新增权限</el-button>
      </page-tool>
      <el-table :data="list" border row-key="id">
        <!-- el-table-column[label="" prop="" align="center"]*4 -->
        <el-table-column label="名称" prop="name" align="center"></el-table-column>
        <el-table-column label="标识" prop="code" align="center"></el-table-column>
        <el-table-column label="描述" prop="description" align="center"></el-table-column>
        <el-table-column label="操作" prop="" align="center">
          <!-- el-button[type="text"]*3 -->
          <template v-slot="{row}">
            <!--点击添加 这里相当于是children的pid 是父级的id type类型根据后端返回的数据来看应该+1 -->
            <el-button type="text" @click="onshowDialog({pid:row.id,type:row.type+1})">添加</el-button>
            <el-button type="text" @click="onEdit(row.id)">编辑</el-button>
            <el-button type="text" @click="onDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 引入组件 新增权限 -->
    <!-- 父组件给子组件传递数据和方法 -->
    <!-- node里面的pid和type传递给子组件 -->
    <!-- 清空数据第三种方式  用v-if 来显示或则隐藏组件   -->
    <!--  v-if是直接控制组件的显示和销毁  销毁是所有的节点都没了 -->
    <!-- :node:node -->
    <add-perm v-if="showDialog" ref="addPremRef" :visible="showDialog" @close="showDialog = false"></add-perm>
  </div>
</template>

<script>
import { translateListToTree } from '@/utils/index'
import { delPermission, getPermissionDetail, getPermissionList } from '@/api/permisson.js'
import AddPerm from './components/addPerm.vue'
export default {
  name: 'Permission',
  components: { AddPerm },
  props: {},
  data() {
    return {
      list: [],
      showDialog: false, // 新增权限的对话框初始状态
      node: {} // 定义数据,存储新增的type和pid
    }
  },
  created() {
    this.getPermissionList() // 获取数据,把数据转换成树形结构
  },
  mounted() { },
  methods: {
    // 给新增权限添加点击事件 将pid和type的值传递给子组件  且开启对话框
    onshowDialog(node) {
      this.showDialog = true
      // 用$nextTick解决异步问题 加了就变成微任务 就会在主线程执行完后马上执行
      this.$nextTick(() => {
        Object.assign(this.$refs.addPremRef.formData, node)
      })
      // this.node = node
    },
    // 删除事件 根据对应row行的id进行删除
    // elmecon 快捷键生成
    onDel(id) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await delPermission(id)
        this.$message.success('删除成功')
        this.getPermissionList()
      })
    },
    // 获取到权限列表 转换成树形结构
    async getPermissionList() {
      // const list = await getPermissionList()
      // this.list = translateListToTree(list, '0')
      this.list = translateListToTree(await getPermissionList(), '0')
    },
    // close() {
    //   this.showDialog = false
    // }
    // 编辑事件
    async onEdit(id) {
      // 1.弹出对话框
      this.showDialog = true
      // 2. 回显数据 调用接口是异步任务 用nextTick将其改成微任务 这样的话就会立即调用
      await this.$nextTick()
      this.$refs.addPremRef.formData = await getPermissionDetail(id)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
